<template>
  <el-card class="box-card">
    <el-form
      ref="form"
      :model="form"
      status-icon
      label-width="80px"
      :rules="rules"
      :hide-required-asterisk="false"
    >
      <el-form-item label="商品名称" style="width:500px" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="商品分类" prop="category">
        <el-select
          v-model="form.category"
          placeholder="请选择活商品分类"
          autocomplete="off"
        >
          <el-option
            :label="item.cateName"
            :value="item.cateName"
            v-for="(item, index) in cate"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品价格">
        <el-input-number
          v-model="form.price"
          @change="handleChange"
          :min="0"
          :max="10000"
          label="描述文字"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="图像上传">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="商品描述" style="width:500px">
        <el-input type="textarea" v-model="form.goodsDesc"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">添加商品</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { addGoods, getGoodsCategory } from '@/req/GoodsAjax'
import { validateAccount, validateuserGroup } from '@/util/rule/fromRule'
import { alterSuccess, alterError } from '@/util/msgTips'
export default {
  data () {
    return {
      form: {
        name: '',
        price: '0',
        goodsDesc: '',
        imgUrl: '',
        category: ''
      },
      cate: [],

      rules: {
        name: [{ validator: validateAccount, trigger: 'blur', required: true }],
        category: [
          { validator: validateuserGroup, trigger: 'blur', required: true }
        ]
      }
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
      this.form.price = val.toString()
    },
    onSubmit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code, msg } = await addGoods(this.form)
          if (code === 0) {
            alterSuccess(msg)
          } else {
            alterError(msg)
          }
          this.form = {}
        } else {
          return false
        }
      })
      // 发送请求
    },

    handleAvatarSuccess (res, file) {
      this.form.imgUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },

  async created () {
    // 获取分类
    const { data } = await getGoodsCategory({ currentPage: 1, pageSize: 10 })
    this.cate = data
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #7e3434;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ccc;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
